<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./zTree_v3-master/css/zTreeStyle/zTreeStyle.css">
</head>
<style>
    * {
        box-sizing: border-box;
    }

    html,
    body {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;

    }

    body {
        padding: 16px;
        background-color: #F2F3F5;
    }

    .main-container {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: #fff;
        padding-left: 252px;
    }

    .device_list {
        position: absolute;
        left: 0;
        top: 0;
        width: 252px;
        height: 100%;
        padding-left: 16px;
        border-right: 1px solid rgb(238, 238, 238);
    }

    .device_list .title {
        height: 56px;
        line-height: 56px;
        font-weight: normal;
    }

    .video_container {
        width: 100%;
        height: 100%;
        padding: 16px;
    }

    .videoContainer {
        width: 100%;
        height: 100%;
        background: #000;
        border-radius: 4px;
        overflow: hidden;
    }

    .camera_off_ico_docu {
        background-image: url('./camera_off.png') !important;
        background-size: 100% 100%;
    }

    .camera_on_ico_docu {
        background-image: url('./camera_on.png') !important;
        background-size: 100% 100%;
    }

    /* ztree */
    .ztree {
        font-size: 14px;
    }

    .ztree li {
        list-style-type: none;
        white-space: nowrap;
        outline: none;
    }

    .ztree li span.button {
        position: relative;
        display: inline-block;
        line-height: 22px !important;
        height: 22px !important;
        width: 22px !important;
        cursor: pointer;
        text-align: center;
        vertical-align: middle;
    }

    .ztree li a {
        display: inline-block;
        line-height: 22px !important;
        height: 22px !important;
        margin: 0;
        cursor: pointer;
        -webkit-transition: none;
        transition: none;
        vertical-align: middle;
        color: #555;
    }

    .ztree .node_name {
        display: inline-block;
        padding: 0 3px !important;
        border-radius: 4px !important;
    }

    .ztree li ul {
        position: relative;
        padding: 0 0 0 20px !important;
        margin: 0;
    }
</style>

<body>
    <div class="main-container">
        <div class="device_list">
            <div class="title">设备列表</div>
            <div id="tree" class="ztree">

            </div>
        </div>
        <div class="video_container">
            <div class="videoContainer">
                <OBJECT ID="MediaClient1" width=100% height=100%
                    CLASSID="CLSID:FA448097-D082-4838-8D4A-3F70005C1AD4"></OBJECT>
            </div>
            <button onclick="Init()">初始化</button>
            <button onclick="logonin();">登录</button>
            <button onclick="StartRealplay();">开始实时播放</button>
        </div>
    </div>
    <script language=javascript for=MediaClient1 event=StateChanged(state,playtime,index)>
        alert("StateChanged:" + state + ",reason:" + playtime + ",index:" + index);
        console.log("StateChanged:", state, playtime, index);
    </script>
    <script language=javascript for=MediaClient1 event=LeftButtonDown(Clientname)>
        alert("LeftButtonDown:" + Clientname);
    </script>
    <script language=javascript for=MediaClient1 event=LeftButtonDbClicked(Clientname)>
        alert("LeftButtonDbClicked:" + Clientname);
    </script>
    <script language=javascript for=MediaClient1
        event=QueryFileResult(errorcode,filename,channel,starttime,endtime,index)>
            console.log(errorcode, filename, channel, starttime, endtime, index);
        </script>
    <script language=javascript for=MediaClient1 event=DownloadPosition(position)>
        console.log(position);
    </script>
    <script language=javascript for=MediaClient1 event=PlaybackAbsPosition(deviceid,position)>
        console.log('播放进度', deviceid, position);
    </script>
    <script language=javascript for=MediaClient1 event=PlaybackPosition(position)>
        console.log('播放进度', deviceid, position);
    </script>
</body>

<!-- <link rel="stylesheet" href="./zTree/awesome.min.css"> -->
<!-- <link rel="stylesheet" href="./zTree/metroStyle.min.css"> -->
<!-- <script src="./zTree_v3-master/js/jquery-1.4.4.min.js" crossorigin="anonymous"></script> -->
<script src="./jquery-3.6.0.min.js"></script>
<script src="./zTree_v3-master/js/jquery.ztree.core.min.js"></script>
<script src="./base64.min.js" crossorigin="anonymous"></script>
<script src="./cookie.js"></script>
<!-- <script src="./crypto-js.min.js" type="text/javascript"></script> -->
<script type="text/javascript">
    function getQueryParams(name) {
        var url = window.location.href;
        var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&");
        var paraObj = {};
        for (i = 0; j = paraString[i]; i++) {
            paraObj[j.substring(0, j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=") + 1, j.length);
        }
        var returnValue = paraObj[name.toLowerCase()];
        if (typeof (returnValue) == "undefined") {
            return "";
        } else {
            // 中文解码用decodeURI
            return decodeURIComponent(returnValue);
        }
    }
    function Init() {
        var result = MediaClient1.Init();
        return result
    }
    function logonin(params) {
        var loginParam = 'ip,' + params.ip + ',port,' + params.port + ',username,' + params.username + ',password,' + params.password + ',dwLinkMode,1';
        var result = MediaClient1.LogonIn(loginParam);
        if (result == 0) {
            // alert("登录成功，返回值：" + result);
        } else {
            // alert("登录失败，返回值：" + result);
        }
    }
    function StartRealplay(params) {
        // let url = document.getElementById("url").value;
        var url = 'rtsp://' + params.username + ':' + params.password + '@' + params.ip + '/Streaming/Channels/1'
        var result = MediaClient1.RealPlayByURL_PlatForm("index,0,playMode,1,url," + url + ",deviceid,15000000041320000001,URLLinkMode,1,PlatformLinkMode,1,dwStreamType,1,hardwaredecode,0,isAudioEnable,1,payloadType,0");
    }
    $(function () {
        var initUndefinedcount = 0
        var initStatus = -1
        var queryParams = getQueryParams('params')
        var params = null

        if (queryParams) {
            try {
                var params = JSON.parse(atob(queryParams))

                if (params.token) {
                    // Cookie.set("TOKEN",params.token,1);
                    sessionStorage.setItem('TOKEN', params.token)
                }
                if (params.id && params.port && params.username && params.password && params.token) {
                    params = {
                        id: params.id,
                        port: params.port,
                        username: params.username,
                        password: params.password,
                        token: params.token
                    }
                }
            } catch (error) {
                console.log(error)
            }
        }
        console.log(queryParams, params)
        var timmer = setInterval(function () {
            if (MediaClient1) {
                clearInterval(timmer)
                initStatus = Init()
                if (initStatus == 0 && params) {
                    logonin(params)
                    StartRealplay(params)
                }
            } else {
                if (initUndefinedcount > 20) {
                    alert("插件启动失败，请确认插件是否已安装！");
                    clearInterval(timmer)
                }
                initUndefinedcount++
            }
        }, 500)
        var treeSetting = {
            check: {
                enable: false
            },
            view: {
                showIcon: function (treeId, treeNode) {
                    return treeNode.level === 1
                }
            },
            callback: {
                onClick: function (event, treeId, treeNode) {
                    if (!treeNode.isParent) {
                        var deviceInfo = treeNode.data
                        var obj = {
                            ip: deviceInfo.ip,
                            port: 8000,
                            username: deviceInfo.loginName,
                            password: deviceInfo.password,
                        }
                        if(initStatus != 0 ) {
                            initStatus = Init()
                        }
                        logonin(obj)
                        StartRealplay(obj)
                        // console.log(treeNode.data)
                    }
                }
            }
        }
        var nodes = []

        $(document).ready(function () {
            $.fn.zTree.init($("#tree"), treeSetting, nodes);
        });

        $.ajax({
            type: "GET",
            url: window.location.origin + '/prod-api/fj/conf_camera/getCameraList',
            headers: {
                Authorization: 'Bearer ' + sessionStorage.getItem('TOKEN')
            },
            success: function (res) {
                if (res.code == 200) {
                    var nodes = []
                    var tunenels= res.data
                    for(var i=0; i<tunenels.length; i++) {
                        var tunenel = tunenels[i]
                        var obj = {
                            name: tunenel.tunnelName+'-'+tunenel.direction+'('+tunenel.onlineNum+'/'+tunenel.totalNum+')',
                            open: true,
                            isParent: true,
                            id: 'tunnelId_' + tunenel.tunnelId
                        }
                        if (Array.isArray(tunenel.cameraList)) {
                            var cameraList = []

                            for(var j=0;j<tunenel.cameraList.length;j++) {
                                var camera= tunenel.cameraList[j]
                                cameraList.push({
                                    name: camera.name,
                                    isParent: false,
                                    id: camera.id,
                                    iconSkin: camera.onlineStatus == 1 ? 'camera_on' : 'camera_off',
                                    data: camera
                                })
                            }
                            obj.children = cameraList
                        }
                        nodes.push(obj)
                    }
                    $.fn.zTree.init($("#tree"), treeSetting, nodes);
                }
            }
        })
    })
    window.onload = function () {
        // window.btoa(unescape(encodeURIComponent(b)))
        // var params = new URL(location.href).searchParams.get('params');
        // if(params) {
        //     try {
        //         params = JSON.parse(decodeURIComponent(escape(window.atob(params))))
        //     } catch (error) {
        //         alert('参数错误！')
        //     }
        // }

        //var a =  {
        //     ip: '192.168.0.245',
        //     port: '8000',
        //     username: 'admin',
        //     password: 'cq753951',
        //     token:'' 
        // }
        // setTimeout(function(){
        //     // console.log(MediaClient1.Init)
        //     if(!MediaClient1.Init) {
        //         var r = confirm("请先下载并安装播放插件！");
        //         if(r == true) {
        //             // window.location.href = 'http://slt.ah.gov.cn/sky/media/images/logo.png';
        //         }
        //     }
        //     status = init()
        //     if(status == 0) {
        //         play(params)
        //     }
        // },1000)

        // function init(){
        //     var resultStatus = -1
        //     try {
        //         resultStatus = MediaClient1.Init();
        //     } catch (error) {
        //         console.log(error)
        //     }
        //     return resultStatus
        // }

        // function play(params){
        //     var loginParam = 'ip,'+params.ip+',port,'+params.port+',username,'+params.username+',password,'+params.password+',dwLinkMode,'+params.linkModel;
        //     // if(initResult == 0) {
        //     var result = MediaClient1.LogonIn(loginParam);
        //     if(result == 0) {
        //         var url = 'rtsp://'+params.username+':'+params.password+'@'+params.ip+'/Streaming/Channels/1'
        //         var result = MediaClient1.RealPlayByURL_PlatForm("index,0,playMode,1,url," + url + ",deviceid,15000000041320000001,URLLinkMode,1,PlatformLinkMode,1,dwStreamType,1,hardwaredecode,0,isAudioEnable,1,payloadType,0");
        //     }
        //     // }
        // }

    }
</script>

</html>